<template>

  <!-- <el-button type="primary" text>
  增加
</el-button> -->
<div class="detailstitle"> 
  <div class="details">编辑抽奖</div>
  <div class="bianjisp">编辑商品</div>
  <div class="detailszhuti">
    <div class="detaleftinp"><span>抽奖主题</span><input type="text"></div>
    <div class="detaleftinp"><span>抽奖类型</span><input type="text"></div>
  </div>

  <!-- 图片上传 -->
  <div class="mainDrawing">
    <div class="leftDrawing">
      <div class="Drawingtext">抽奖主图</div>
      <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </div>

    <div class="centerDrawing">
      <div>活动列表页图</div>
    </div>

    <div class="rightDrawing">
      <div class="reaitext"><img src="../assets/reai.png" alt="" class="reai"><div>热爱进行时</div></div>
    </div>
  </div>
</div>
</template>
<script>

export default {
components: {

},
data() {
  return {
    HttpImg: "http://gyycadmincss.hansn.cn",
    imageUrl: ''
  }
},
mounted() {

},
methods: {
  handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
}
}
</script>
<style scoped>
   input{
      border: 0;/*清除自带的2px的边框*/
      padding: 0;/*清除自带的padding间距*/
      outline: none;/*清除input点击之后的黑色边框*/
    }
.avatar-uploader{
  border: 1px solid #000;
  outline:none !important;
}

.details{
  font-size: 24px;
  font-weight: 400;
  color: #000;
  margin-bottom: 57px;
}
.bianjisp{
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
}
.detailszhuti{
  display: flex;
  margin-bottom: 47px;
}
.detaleftinp{
  width: 540px;
  height: 50px;
  line-height: 50px;
  align-items: center;
  margin-right: 60px;
  padding: 0 12px;
  border: 1px solid #000000;
}
.detaleftinp span{
  color: #FF0000;
  margin-right: 36px;
  font-weight: 700;
}
.mainDrawing{
  display: flex;
  color: #FF0000;
  font-weight: 700;
}
.leftDrawing{
  margin-right: 49px;
}
.centerDrawing{
  margin-right: 56px;
}
.rightDrawing{
  color: #FF0000;
}
.reaitext{
 display: flex;
}
.reai{
  width: 22px;
  height: 22px;
  margin-right: 7px;
}
.Drawingtext{
  margin-bottom: 7px;
}
.avatar-uploader-icon{
  width: 200px;
  height: 200px;
}
.avatar{
  width: 200px;
  height: 200px;
}
</style>
